<template>
  <div>
    <el-dialog
        title="修改个人信息"
        :visible.sync="dialogVisible"
        width="60%"
        :before-close="handleClose">
      <el-form :model="form" :rules="rules" ref="form" label-width="150px">
        <div class="updateInfo">
          <div class="left">
            <el-upload
                class="avatar-uploader"
                action="/api/employee/avatarUpLoad"
                :headers="keyQuery"
                :show-file-list="false"
                accept=".jpg,.png,.jpeg"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <el-form-item label="账号密码" prop="password">
              <el-input v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item label="昵称" prop="nickname">
              <el-input v-model="form.nickname"></el-input>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
              <el-input v-model="form.age"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-switch
                  v-model="form.sex"
                  active-color="#13ce66"
                  inactive-color="blue"
                  active-text="男"
                  inactive-text="女"
                  :active-value= 1
                  :inactive-value= 0
              >
              </el-switch>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="form.email"></el-input>
            </el-form-item>
          </div>
          <div class="right">
            <el-form-item label="用户编号" prop="id">
              <el-input v-model="form.id" disabled></el-input>
            </el-form-item>
            <el-form-item label="账号" prop="username">
              <el-input v-model="form.username" disabled></el-input>
            </el-form-item>
            <el-form-item label="地区" prop="region">
              <el-input v-model="form.region"></el-input>
            </el-form-item>
            <el-form-item label="兴趣爱好" prop="hobbies">
              <el-input v-model="form.hobbies"></el-input>
            </el-form-item>
            <el-form-item label="职业" prop="job">
              <el-input v-model="form.job"></el-input>
            </el-form-item>
            <el-form-item label="个性签名" prop="intro">
              <el-input v-model="form.intro"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
              <el-input v-model="form.phone" :maxlength="11">

              </el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click.native="submit">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "PersonalDia",
  data() {
    return {
      url:null,
      imageUrl:null,
      dialogVisible: false,
      keyQuery:{
        key:"",
        token: localStorage.getItem("token")
      },
      //接收上传的文件
      fileImage:null,
      form: {
        headImage: "",
        password: null,
        nickname: null,
        age: null,
        email: "",
        phone: "",
        sex: null,
        id: null,
        username: "",
        region: "",
        hobbies: "",
        job: "",
        intro: "",
      },
      rules: {
        nickname: [
          { required: true, message: "昵称不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
        ],
        phone: [
            {pattern:/^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/, required: true, message: '请输入正确的手机号码', trigger: 'blur' },
        ]
      },
    };
  },
  methods:{
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.form.headImage = file.response;
      this.fileImage = file.response;
      this.$message.success("上传成功！请提交后查看！")
    },
    beforeAvatarUpload(file) {
      //在头像上传之前需要做的判断，如判断文件格式
      const isJPG = file.type === 'image/jpeg'||file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/JPEG,PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    open() {
      this.getEmployeeById(this.form.id);
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
      this.$emit("flesh");
    },
    getEmployeeById(id){
      /*this.$http.get("/employee/getInfoById/"+id).then(result=>{
        result = result.data;
        this.form = result.object;
        if(this.fileImage !== null) {
          this.form.headImage = this.fileImage;
        }
        this.keyQuery.key = JSON.parse(localStorage.getItem("loginUser")).id;
      })*/
    },
    submit(){
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.form.id = JSON.parse(localStorage.getItem("loginUser")).id;
          this.$http.post("/employee/info/save",this.form).then(result=>{
            this.dialogVisible = false;
            this.$emit("flesh");// 调用父组件的flesh方法 刷新父组件
          })
        }
      });
    }
  },
  beforeMount() {
    // 传入id
    this.id = JSON.parse(localStorage.getItem('loginUser')).id;
    this.getEmployeeById(this.id);
  },
}
</script>


<style lang="scss">
.avatar-uploader el-upload {
  padding-left: 150px;
  border: 10px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader el-upload:hover {
  padding-left: 150px;
  border-color: #409EFF;
}
.avatar-uploader-icon {
  padding-left: 150px;
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  border-radius: 100%;
  margin-left: 150px;
  margin-bottom: 40px;
  width: 178px;
  height: 178px;
  display: block;
}
.updateInfo {
  height: 500px;
  overflow: auto;
}
.left {
  /* width: 330px; */
  float: left;
}
.right {
  overflow: hidden;
}
</style>